<script setup lang="ts">
    import { ref, onMounted, computed } from 'vue';
    import { scrollToAnimationFn } from '@/utils'
    import userIconSrc from '@/assets/image/user-icon.jpg';
    import { useArticleStore } from '@/stores/article';
    import { useRoute } from 'vue-router';
    import { CommentWayEnum } from '@/enums';

    import Main from '@/views/Main/index.vue';
    import CommentRelease from '@/components/CommentBox/Release/index.vue';
    import CommentList from '@/components/CommentBox/List/index.vue';
    import RecommendTab from '@/views/Sidebar/components/Recommend/index.vue';
    import LastCommentTab from '@/views/Sidebar/components/LastComment/index.vue';
    import BlogDetailPanel from '@/views/Main/Detail/components/Panel/index.vue';

    import hljs from 'highlight.js/lib/core';
    import 'highlight.js/styles/atom-one-dark.css';
    
    import QRCode, { QRCodeRenderersOptions } from 'qrcode';
    import moment from 'moment';

    const route = useRoute();
    const articleStore = useArticleStore();

    const content = ref<HTMLElement | null>(null);
    const positionRef = ref<HTMLElement | null>(null);
    const QRCodeRef = ref<HTMLCanvasElement | null>(null);

    // 获取网站域名和端口
    const domain = ref(location.host);
    // 文章内码
    const wznm = ref(route.params.id);
    // 文章详情信息
    const articleData = computed(() => articleStore.articleInfo);
    
    // 代码高亮
    const highlight = () => {
        // 代码高亮
        const blocks = content.value?.querySelectorAll("pre");
        blocks?.forEach(block => {
            hljs.highlightElement(block);
            // 清除最后一个换行符
            block.innerHTML = block.innerHTML.substring(0, block.innerHTML.length - 1)
            // 从这开始是设置行号
            block.innerHTML = `<ol><li>${block.innerHTML.replace(/\n/g, `</li><li class="line">`)}</li></ol>`;
        })
    };
    // 获取二维码
    const getQRCode = () => {
        let opts: QRCodeRenderersOptions = {
            errorCorrectionLevel: "H", //容错级别
            margin: 1, //二维码留白边距
            width: 80, // 二维码大小
            color: {
                dark: "#333333", //前景色
                light: "#fff", //背景色
            },
        };
        // 将获取到的数据(val)画到msg(canvas)上
        QRCode.toCanvas(QRCodeRef.value, ('http://' + domain.value + '/blog/detail/' + wznm), opts, (error: any)  => {
            if (error) {
                console.log("二维码加载失败", error);
            }
        });
    }
    // 锚点定位
    const goDingyue = () => {
        if(positionRef.value) {
            scrollToAnimationFn(positionRef.value.offsetTop + 25, 1000)
        }
    }

    onMounted(async() => {
        // 获取文章信息
        await articleStore.getArticleInfo(wznm.value.toString());
        // 代码高亮
        highlight();
        // 获取二维码
        getQRCode();
    });
</script>
<template>
    <Main>
        <template #navigation>
            <div class="leave_position">
                <svg-icon href='#icon-position' width="13px" height="13px"></svg-icon>
                &nbsp;您现在的位置是：
                <router-link style="color: black;font-size: 14px;" to="/">
                    首页
                </router-link>
                <label>&nbsp;>&nbsp;</label>
                <router-link style="color: black;font-size: 14px;" to="/news">
                    {{ articleData.title }}
                </router-link>
            </div>
        </template>
        <template #leftColumn>
            <section class="sideTab">
                <div class="blog-header">
                    <h2 class="blog-title">{{ articleData.title }}</h2>
                    <div class="label" style="margin-bottom: 10px">
                        <el-tag style="margin-right: 10px;">
                            <el-icon><FolderOpened /></el-icon>&nbsp;{{articleData.columnName}}
                        </el-tag>
                        <el-tag v-for="(label, index) in articleData.label" :key="index" type="info" style="margin-right: 10px;">
                            #&nbsp;{{ label }}
                        </el-tag>
                    </div>
                    <div class="info">
                        <!-- 个人信息名片 -->
                        <img :src="userIconSrc" />
                        <user-card :yhnm="articleData.auther_user_info?.yhnm">
                            <a href="/"><span>{{ articleData.auther_user_info?.nickName }}</span></a>
                        </user-card>
                        <span class="point"></span>
                        <span>{{ moment(articleData.releaseTime).startOf('minute').fromNow() }}</span>
                        <span class="point"></span>
                        <span>浏览 <label>{{ articleData.hits }}</label></span>
                    </div>
                </div>
                <div ref="content" class="blog-content ql-editor" v-html="articleData.content"></div>
                <div class="copynotice">
                    <canvas ref="QRCodeRef" id="QRCode_header"></canvas>
                    <template v-if="articleData.fromWay === 3">
                        <div class="text">
                            <p>
                                版权声明：本文由 
                                <router-link style="color: black;font-size: 14px;" to="/">
                                    <span style="color: #333;font-weight: bolder;">羅氏博客</span>
                                </router-link>
                                发布，如需转载请注明出处。
                            </p>
                            <p>
                                本文链接：
                                <a :href="articleData.fromUrl">
                                    {{ articleData.fromUrl }}
                                </a>
                            </p>
                        </div>
                    </template>
                    <template v-if="articleData.fromWay === 2">
                        <div class="text">
                            <p>转载声明： 版权归原作者所有，如需转载请保留出处</p>
                            <p>
                                来源链接：
                                <a href="https://www.yanghuaxing.com/blog/1531.html">
                                    https://www.yanghuaxing.com/blog/1531.html
                                </a>
                            </p>
                            <p>
                                <span class="prompt" style="color: red !important;">温馨提示：</span>
                                文章内容系作者个人观点，不代表
                                <router-link style="color: black;font-size: 14px;" to="/">
                                    <span style="color: #333;font-weight: bolder;">羅氏博客</span>
                                </router-link>
                                对其观点赞同或支持。
                            </p>
                        </div>
                    </template>
                    <template v-if="articleData.fromWay === 1">
                        <div class="text">
                            <p>
                                版权声明：本文由 
                                <router-link style="color: black;font-size: 14px;" to="/">
                                    <span style="color: #333;font-weight: bolder;">羅氏博客</span>
                                </router-link>
                                发布。
                            </p>
                            <p>
                                本文链接：
                                <a :href="'http://' + domain + '/blog/detail/' +articleData.wznm">
                                    {{ 'http://' + domain + '/blog/detail/' + articleData.wznm }}
                                </a>
                            </p>
                            <p>
                                <span class="prompt" style="color:red">温馨提示：</span>转载时必须以链接形式注明原始出处及本声明。
                            </p>
                        </div>
                    </template>
                </div>
                <div class="separated"  ref="positionRef" style="width: 100%;">
                    <div class="nextinfo">
                        <p>
                            上一篇：
                            <a v-if="articleStore.onArticleInfo" :href="'/blog/detail/' + articleStore.onArticleInfo.wznm" v-text="articleStore.onArticleInfo.title" style="color: #999"></a>
                            <a v-if="!articleStore.onArticleInfo" style="color: #999">没有文章了！</a>
                        </p>
                        <p>
                            下一篇：
                            <a v-if="articleStore.underArticleInfo" :href="'/blog/detail/' + articleStore.underArticleInfo.wznm" v-text="articleStore.underArticleInfo.title" style="color: #999"></a>
                            <a v-if="!articleStore.underArticleInfo" style="color: #999">没有文章了！</a>
                        </p>
                    </div>
                </div>
            </section>
            <!-- 文章详情面板 -->
            <blog-detail-panel @goDingyue="goDingyue" />
            <!-- 评论发布 -->
            <comment-release title="发表评论" :wznm="wznm.toString()" :type="CommentWayEnum.AERICLE" withHeader />
            <!-- 评论列表 -->
            <comment-list :wznm="wznm.toString()" :type="CommentWayEnum.AERICLE" />
        </template>
        <template #rightColumn>
            <!-- 站长推荐 -->
            <recommend-tab />
            <!-- 最新评论 -->
            <last-comment-tab />
        </template>
    </Main>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />